<script>
import KtMap from "/src/components/common/KtMap.vue";
import MapSelectDialog from "/src/views/manage/iot/project/components/MapSelectDialog.vue";

export default {
  components: {MapSelectDialog, KtMap},
  data() {
    return {
      show: false,
      requestParam: {
        // 是否热门
        isHot: false,
        // 图片
        fileIdOfImage: "",
        // 名称
        name: "",
        // 描述
        description: "",
        // 受理范围
        acceptRange: "",
        continentId:"",

      },
      loading: false
    }
  },
  mounted() {
  },
  methods: {
    openNew(item) {
      this.requestParam = {
        // 是否热门
        isHot: false,
        // 图片
        fileIdOfImage: "",
        // 名称
        name: "",
        // 描述
        description: "",
        // 受理范围
        acceptRange: "",
        continentId:"",

      };

      this.requestParam.continentId = item.id;
      this.show = true;
    },
    open(requestParam) {
      this.requestParam = JSON.parse(JSON.stringify(requestParam));
      this.show = true;
    },
    // 关闭
    close() {
      this.show = false;
    },
    // 上传图片
    uploadImg() {
      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "obic",
          stateSuccess: (res) => {
            this.requestParam.fileIdOfImage = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            this.$message.error(res.errMsg);
          }
        });
      });
    },

    toSave() {

      this.loading = true;
      // element的loading
      let loading = this.$loading({
        lock: true,
        text: this.$i18n.zhToGlobal('保存中'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$kt.request.send({
        uri: "/bus-visa-web/admin/visaGoods/save",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$message.success(this.$i18n.zhToGlobal('保存成功'));
          this.close();
          this.loading = false;
          loading.close();
          this.$emit("save");
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
          loading.close();
        }
      });
    }
  }
}
</script>

<template>
  <el-dialog
      draggable
      width="300px"
      v-model="show"
      :title="$i18n.zhToGlobal('保存')"
      @close="close"
  >
    <el-scrollbar
        :style="{height: '300px'}">
      <el-form
          label-position="top"
          :model="requestParam" label-width="80px">
        <el-form-item :label="$i18n.zhToGlobal('是否热门')">
          <el-switch v-model="requestParam.isHot"></el-switch>
        </el-form-item>

        <el-form-item :label="$i18n.zhToGlobal('图片')">
          <div class="icon-box">
            <el-image
                fit="cover"
                :preview-src-list="[$kt.file.visit(requestParam.fileIdOfImage)]"
                v-if="requestParam.fileIdOfImage"
                class="icon-img"
                :src="$kt.file.visit(requestParam.fileIdOfImage)" />
            <div
                @click="uploadImg"
                class="icon-edit">更改/添加</div>
          </div>
        </el-form-item>

        <el-form-item :label="$i18n.zhToGlobal('名称')">
          <el-input v-model="requestParam.name"></el-input>
        </el-form-item>

        <el-form-item :label="$i18n.zhToGlobal('描述')">
          <el-input v-model="requestParam.description"></el-input>
        </el-form-item>

        <el-form-item :label="$i18n.zhToGlobal('受理范围')">
          <el-input
              type="textarea"
              v-model="requestParam.acceptRange"></el-input>
        </el-form-item>




      </el-form>

    </el-scrollbar>

    <div style="height: 40px"></div>
    <el-button
        @click="toSave"
        type="primary"
        style="width: 100%;position: absolute;bottom: 0;left: 0;border-radius: 0 0 3px 3px"
    >
      {{ $i18n.zhToGlobal('保存') }}
    </el-button>
  </el-dialog>

  <map-select-dialog
      @select="mapSelect"
      ref="mapSelectDialog"></map-select-dialog>

</template>

<style scoped lang="scss">
.map-box {
  // 超出不显示
  overflow: hidden;
}

.gen-btn {
  cursor: pointer;
}

.gen-btn:hover {
  transform: scale(1.1);
}

.gen-btn:active {
  transform: scale(1);
}


.icon-box {
  width: 300px;
  height: 200px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: inline-block;
  position: relative;

  .icon-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .icon-edit{
    position: absolute;
    width:100%;
    text-align: center;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0 0 10px 10px;
  }

  .icon-edit:hover{
    background-color: rgba(0,0,0,.5);
  }

  .icon-edit:active{
    background-color: rgba(0,0,0,.3);
  }
}


</style>